<template>
  <div style="background-color: #faebd7" class="w-screen flex items-center h-screen justify-center">
    <div class="relative bg-mobile" style="width: 323px;height: 675px">
      <div class="absolute w-full" style="top: 84px">
        <div class="text-white font-bold w-full text-center">
          移动端
        </div>
      </div>

      <div v-if="showColor!=4" class="absolute bg-white z-30 mr-6" style="top: 106px;">
        <el-row class="justify-center items-center">
          <el-col :span="6" class="cursor-pointer">
            <img src="../assets/logo.png" @click="gotoIndex">
          </el-col>
          <el-col :span="16" :offset="2">
            <el-input placeholder="搜索" size="mini" v-model="searchInfo">
              <template #append>
                <el-button style="background-color: #fd7a72" size="mini">搜索</el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>
      </div>

      <div class="absolute overflow-hidden" :style="{height:(showColor===3||showColor===6?'420px':'460px')}" style="top: 106px;width: 320px">
        <div class="overflow-y-scroll bg-white pt-10 pb-3" :style="{height:(showColor===3||showColor===6?'420px':'460px')}">
          <router-view/>
        </div>
      </div>
      <div v-if="showColor===6" class="h-12 bg-white absolute w-full z-30" style="bottom: 109px" >
        <el-row class="items-center" style="line-height: 50px">
          <el-col :span="5" :offset="1" style="font-size: 13px">
            <i class="iconfont icon-home2" style="font-size: 13px"></i>
            <span>首页</span>
          </el-col>
          <el-col :span="5" :offset="4" style="font-size: 13px">
            <el-button size="mini" type="danger" plain>立即购买</el-button>
          </el-col>
          <el-col :span="5" :offset="1" style="font-size: 13px">
            <el-button size="mini" type="danger" @click="gotoCar">加入购物车</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="absolute w-full z-30" style="bottom: 109px" v-if="showColor===3">
        <el-row class="h-12 bg-white w-full items-center">
          <el-col :span="2" :offset="1" class="float-right">
            <input type="checkbox" v-model="allCheck" />
          </el-col>
          <el-col :span="2" style="font-size: 10px" >
            全选
          </el-col>
          <el-col :span="2" :offset="1" style="font-size: 10px" class="cursor-pointer hover:text-red-700">
            删除
          </el-col>
          <el-col :span="3" :offset="3">
            <div class="" style="font-size: 10px">合计：</div>
          </el-col>
          <el-col :span="3">
            <div class="text-myRed-one text-sm">￥{{allPrice.toFixed(2)}}</div>
          </el-col>
          <el-col :span="5" :offset="2">
            <el-button size="mini" type="danger">结算</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="absolute w-full bg-white" style="bottom: 52px">
        <el-row>
          <el-col :span="6" :class="showColor===1?'text-myRed-one':''" class="text-center cursor-pointer">
            <router-link to="/mobile/index">
              <i class="iconfont icon-home2" style="font-size: 22px"></i>
              <div>首页</div>
            </router-link>
          </el-col>
          <el-col :span="6" :class="showColor===2?'text-myRed-one':''" class="text-center cursor-pointer">
            <router-link to="/mobile/goods">
              <i class="iconfont icon-type" style="font-size: 22px"></i>
              <div>商品</div>
            </router-link>
          </el-col>
          <el-col :span="6" :class="showColor===3?'text-myRed-one':''" class="text-center cursor-pointer">
            <router-link to="/mobile/car">
              <i class="iconfont icon-shop_car" style="font-size: 22px"></i>
              <div>购物车</div>
            </router-link>
          </el-col>
          <el-col :span="6" :class="showColor===4?'text-myRed-one':''" class="text-center cursor-pointer">
           <router-link to="/mobile/login">
             <i class="iconfont icon-myfill" style="font-size: 22px"></i>
             <div>我的</div>
           </router-link>
          </el-col>
        </el-row>
      </div>
      <div class="w-full text-center absolute -bottom-10">
        <el-button type="danger" @click="PC">返回PC端</el-button>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import {useRouter, useRoute} from "vue-router"
import {Ref, ref, watch} from "vue"
import {useStore} from "vuex";

const $router = useRouter();
const $route = useRoute();
const $store = useStore();
let showColor: Ref<number> = ref(1);
let allPrice: Ref<number> = ref(0)
let allCheck:Ref<boolean> = ref(false);
let searchInfo:Ref<string> = ref("");
watch( allCheck, (newValue,oldValue) => {
  $store.commit("setAllCheck",newValue)
})
watch( () => $store.state.allPrice, (newValue,oldValue) => {
  allPrice.value = newValue;
})
if ($route.path === '/mobile/index') {
  showColor.value = 1;
} else if ($route.path === '/mobile/goods') {
  showColor.value = 2;
} else if ($route.path === '/mobile/car') {
  showColor.value = 3;
}else if ($route.path === '/mobile/mDetail'){
  showColor.value = 6;
}
else {
  showColor.value = 4;
}

function gotoIndex() {
  $router.push({
    name: 'mobileIndex'
  })
}
watch($route, () => {
  if ($route.path === '/mobile/index') {
    showColor.value = 1;
  } else if ($route.path === '/mobile/goods') {
    showColor.value = 2;
  } else if ($route.path === '/mobile/car') {
    showColor.value = 3;
  }else if ($route.path === '/mobile/mDetail'){
    showColor.value = 6;
  }
  else {
    showColor.value = 4;
  }
})
function gotoCar() {
  $router.push({
    name: 'car'
  })
}
function PC() {
  $router.push({
    name: 'index'
  })
}
</script>

<style scoped>
:deep(.el-button__text--expand) {
  @apply text-white
}

:deep(.el-input__inner):focus {
  @apply border-myRed-one
}
</style>